
  <div class="row">
    <div class="col-md-12">
      <h1>Unified Data Bundle</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <h1>{{adsText}}</h1>
    </div>
  </div>
  <!--Header-->
  <!--main--> 
  <!--mainInfo-->
  <div class="row">
    <div class="col-sm-3 col-xs-12">
      <div class="col-xs-12 Border">
        <div class="col-xs-12">
          <h3>USB Sim Number:</h3>
          <!--<h5>Deducted after recharge your balance.</h5>-->
          <div class="USB_Sim_Number_Icon">&nbsp;</div>
        </div>
        <div class="col-xs-12">
          <h3> {{mobileInternet.usbMsisdn}}</h3>
        </div>
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <div class="col-xs-12 Border">
        <div class="col-xs-12">
          <h3>Your Plan:</h3>
          <h5><span>{{mobileInternet.ratePlan}}</span></h5>
          <div class="Your_Plan_Icon">&nbsp;</div>
        </div>
        
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <div class="col-xs-12 Border">
        <div class="col-xs-12">
          <h3>My Balance:</h3>
          <h2><span>{{mobileInternet.balance}}</span><span>LE</span></h2>
          <div class="My_Balance_Icon">&nbsp;</div>
        </div>
        
      </div>
    </div>
    <div class="col-sm-3 col-xs-12">
      <div class="col-xs-12 Border">
        <div class="col-xs-12">
          <h3>Salafny Amount:</h3>
          <h2>{{mobileInternet.sallefny}}<span>LE</span></h2>
          <div class="Salafny_Amount_Icon">&nbsp;</div>
        </div>
        
      </div>
    </div>
  </div>
  <!--mainInfo--> 
  <!--mainTaps-->
  <!--mainTaps--> 
  
  
  <!-----------------------------------------------------Mobile InterNet---------------------------------------------------------------------->
  <div class="Show_Mobile_Internet_Bundle">
    <!--mainBar-->
  <div class="row">
    <div class="col-sm-12 col-xs-12">
      <h2 class="text_align_Center"> Total Remaining Qouta <span ng-bind="GetValueInGB(AllMIData.quotaAddonInquiry[0].dataQuota[0].remainder)"></span>  <span ng-bind="GetDisplayedUnit(AllMIData.quotaAddonInquiry[0].dataQuota[0].remainder)">GB</span> </h2>
      <h3 class="text_align_Center"> Main Quota <span ng-bind="GetValueInGB(AllMIData.quotaAddonInquiry[0].dataQuota[0].balance)"></span> <span ng-bind="GetDisplayedUnit(AllMIData.quotaAddonInquiry[0].dataQuota[0].remainder)"></span> </h3>
      <h4 class="text_align_Center"><span class="UDB_Total_Remaining_Qouta_TXT_Description_Icon"> &nbsp; </span> Renewal Date: <span>{{AllMIData.quotaAddonInquiry[0].dataQuota[0].renewalDate}} / {{AllMIData.quotaAddonInquiry[0].daysLeft}} Days </span>left for your renewal </h4>
    </div>
    <div class="col-sm-12 col-xs-12">
      <div class="progress-container">
        <div class="progress-bar_ruler"></div>
        <div class="progress-bar_leftAndright_TXT">
          <div class="progress-bar_left_TXT">
            <span ng-bind="GetValueInGB(mobileInternet.consumedQouta)"></span>
            <span ng-bind="GetDisplayedUnit(mobileInternet.consumedQouta)" ></span>
            <div> Consumed </div>
          </div>
          <div class="progress-bar_right_TXT">
            <span ng-bind="GetValueInGB(mobileInternet.totalQouta)"></span>
            <span ng-bind="GetDisplayedUnit(mobileInternet.totalQouta)" ></span>
            <div> Remaining </div>
          </div>
        </div>
        <div class="progress active">
          <div class="progress-bar progress-bar-success progress-html" id="testbar" ng-style="setprogerress('testbar',(mobileInternet.consumedQouta/mobileInternet.totalQouta)*100)"></div>
        </div>
      </div>
    </div>
  </div>
  <!--mainBar--> 
  <!--mainBar Add-ons-->
  <div class="row Show_Add_On">
    <div class="col-sm-6 col-xs-12" ng-repeat="x in AllMIData.quotaAddonInquiry[0].addonPkgDetailsDTO" >
      <div class="col-xs-12 Border">
        <div class="col-xs-12">
          <h2> {{x.dataQuota[0].quotaName}} </h2>
          <h4> Total Add-On Time based is <span ng-bind="GetValueInGB(x.dataQuota[0].balance)"></span> <span ng-bind="GetDisplayedUnit(x.dataQuota[0].balance)"></span> </h4>
          <h5><span class="UDB_Total_Remaining_Qouta_TXT_Description_Icon"> &nbsp; </span> Renewal Date: <span>{{x.dataQuota[0].renewalDate}} / {{x.daysLeft}} Days </span>left </h5>
          <div class="UDB_Quota_Icon Right_Icon"></div>
        </div>
        <div class="col-sm-12 col-xs-12">
          <div class="progress-container">
            <div class="progress-bar_ruler"></div>
            <div class="progress-bar_leftAndright_TXT">
              <div class="progress-bar_left_TXT">
                <span ng-bind="GetValueInGB(x.dataQuota[0].consumption)"></span>
                <span ng-bind="GetDisplayedUnit(x.dataQuota[0].consumption)" ></span>

                <div> Consumed </div>
              </div>
              <div class="progress-bar_right_TXT">
                <span ng-bind="GetValueInGB(x.dataQuota[0].remainder)"></span>
                <span ng-bind="GetDisplayedUnit(x.dataQuota[0].remainder)" ></span>
                <div> Remaining </div>
              </div>
            </div>
            <div class="progress active">
              <div class="progress-bar progress-bar-success progress-html" ng-style="setprogerress('testbar'+$index ,((GetValueInGB(x.dataQuota[0].balance)- (GetValueInGB(x.dataQuota[0].remainder)))/(GetValueInGB((AllMIData.quotaAddonInquiry[0].dataQuota[0].balance))))*100)" id="testbar{{$index}}"></div>
            </div>
          </div>
        </div>
        <div class="col-sm-5 col-xs-12 ">
          <button href="#a" class="btn btn-primary btn-block" data-toggle="modal" data-target="#Conformation">Deactivate Bundle</button>
        </div>
        <div class="col-sm-4 col-xs-12 ">
          <button href="#a" class="btn btn-info btn-block Repurchase_Action">Repurchase</button>
        </div>
        <div class="col-sm-3 col-xs-12">
          <button href="#a" class="btn btn-default btn-block" data-toggle="modal" data-target="#Conformation">HUB</button>
        </div>
      </div>
    </div>
  </div>
  <hr />
  <!--mainBar Add-ons--> 

  <!--mainRateplan--> 
  </div>
  <!--main--> 
